
import { Component, createRef } from 'react';

class Mouse extends Component {
    constructor(props){
        super(props);
        // 初始状态
        this.state = {  x: 0,  y: 0 }
        // 创建 Ref 并赋值给 wrapper 变量
        this.wrapper = createRef();
    }
    handleMouseMove = (evt) => {
        // 获得 wrapper 距离 浏览器 左侧 和 顶端 的 偏移量
        const { offsetLeft , offsetTop } = this.wrapper.current;
        // 用鼠标位置减去偏移量即可得到鼠标在 wrapper 内的相对位置
        const x = evt.clientX - offsetLeft;
        const y = evt.clientY - offsetTop;
        // 修改状态
        this.setState( { x, y } );
    }
    render(){
        return (
            <div onMouseMove={ this.handleMouseMove } ref={ this.wrapper }>
                {/* 用 `render` prop 动态决定渲染的内容 */}
                { this.props.render( this.state ) }
            </div>
        )
    }
}

export default Mouse;